<template>
  <div class="whole-page">
    <Tabs :currentIndex="currentIndex" @changeCurrentIndex="changeCurrentIndex" class="clear-fix">
      <tab tabName="发现" index="1" >
        <div class="page">
          <DetailFind/>
        </div>
      </tab>
      <tab tabName="动态" index="2">
        <div class="page">
          <Dynamic/>
        </div>
      </tab>
    </Tabs>
    <FootNav/>
  </div>
</template>
<script>
import Vue from "vue";
import FootNav from "../../components/FootNav";
import Tabs from "@/components/tabs";
import DetailFind from "@/containers/Find/FindSubpage/DetailFind/DetailFind";
import Dynamic from "@/containers/Find/FindSubpage/Dynamic/Dynamic";
// 只能写成单独的不能合并
Vue.use(Tabs);
export default {
  name: "Find",
  data() {
    return {
      currentIndex: "1"
    };
  },
  components: {
    FootNav,
    DetailFind,
    Dynamic,
    // Tabs
  },
  methods: {
    changeCurrentIndex(index) {
      this.currentIndex = index;
    }
  }
};
</script>

<style scoped lang="less">
.whole-page {
  overflow:scroll;
  width: 100%;
}

li {
  // float: left;
  flex-grow: 1;
  // height: 3rem;
  // line-height: 3rem;
  padding:15px 0;
  text-align: center;
  background-color: #000;
  color: white;
  font-size: 1rem;
}
.page {
  clear: both;

  // margin-top: 3rem;
}
.active {
  color:#EDD007;
  // border: 0px solid white;
}
</style>
